<template>
  <div
    style="
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    "
  >
    <img :src="imageSrc" alt="" />
    <el-upload
      class="upload-demo"
      drag
      style="width: 400px"
      :auto-upload="false"
      :before-upload="beforeAvatarUpload"
      :on-change="changeSize"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">请上传您的头像<em>上传</em></div>
    </el-upload>
    <el-dialog
      v-model="centerDialogVisible"
      title="裁剪头像"
      width="60%"
      align-center
    >
      <!-- 这里可以来放图片 -->

      <vueCropper
        class="crop-box"
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :fixedBox="option.fixedBox"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        @cropMoving="cropMoving"
      ></vueCropper>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUploadAvatar">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import { reactive, ref } from 'vue'
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import { uploadAvatarApi } from '@/api'

const centerDialogVisible = ref(false)

const uploadFile = ref({})

// const croppedImageData = ref(null)
const cropper = ref()

const imageSrc = ref('')

const option = reactive({
  img: '', // 裁剪图片的地址
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量
  outputType: 'jpg', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  canMoveBox: true, // 截图框能否拖动
  autoCropWidth: 200, // 默认生成截图框宽度
  autoCropHeight: 200, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例
  full: false, // 是否输出原图比例的截图
  original: false, // 上传图片按照原始比例渲染
  centerBox: false, // 截图框是否被限制在图片里面
  infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
})

const beforeAvatarUpload = (rawFile) => {
  if (!rawFile.type.includes('image')) {
    ElMessage.error('很抱歉您上传的不是图片格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('您上传的图片大小超过了2MB')
    return false
  }
  return true
}

const changeSize = (UploadFile) => {
  centerDialogVisible.value = true
  uploadFile.value = UploadFile

  const reader = new FileReader()
  reader.onload = (e) => {
    option.img = e.target.result
  }
  reader.readAsDataURL(UploadFile.raw)
}

const handleUploadAvatar = () => {
  //上传头像并且点击了确认按钮
  cropper.value.getCropBlob(async (data) => {
    // do something
    let formData = new FormData()
    //第三个参数是规定以什么为后缀，接口是根据后缀来返回地址格式的
    formData.append('file', data, 'avatar.jpg')
    //上传文件接口
    const res = await uploadAvatarApi(formData)

    if (res.code == 200) {
      console.log(res.data.url)
      imageSrc.value = 'http://localhost:3000/' + res.data.url
      ElNotification({
        title: '上传图像',
        message: '恭喜您上传头像成功',
        type: 'success'
      })
      centerDialogVisible.value = false
    }
  })
}
const cropMoving = () => {
  // console.log(data)
}
</script>

<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
:deep(.el-dialog__body) {
  width: 97%;
  height: 600px;
}
</style>
